<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
      <el-form-item label="账号(手机号)："  prop="mobile">
        <el-input type="number" :disabled="form.id>0" v-model="form.mobile"/>
      </el-form-item>
      <el-form-item label="密码：" prop="password" v-if="!form.id">
        <el-input type="text" v-model="form.password"   maxlength="12" show-word-limit/>
      </el-form-item>
      <el-form-item label="姓名：" prop="name">
        <el-input type="text" v-model="form.name"  maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="联系人姓名：">
        <el-input type="text" v-model="form.contactName"  maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="联系人电话：" prop="contactMobile">
        <el-input type="number" v-model="form.contactMobile"/>
      </el-form-item>
      <el-form-item label="试用天数" prop="freeDays">
        <el-input type="number" v-model="form.freeDays"/>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input type="number" v-model="form.price"/>
      </el-form-item>
      <el-form-item label="封面图" prop="coverImage">
        <uploadimg :setImg="setImg" :dialogImageUrl="dialogImageUrl"/>
        <span style="color: #999999">建议尺寸300x750高宽，大小2M以内</span>
      </el-form-item>
      <el-form-item label="分享图" prop="coverImage">
        <uploadimg :setImg="setShareImg" :dialogImageUrl="shareImageUrl"/>
        <span style="color: #999999">建议尺寸300x750高宽，大小2M以内</span>
      </el-form-item>
      <el-form-item label="logo" prop="logo">
        <uploadimg :setImg="setLogo" :dialogImageUrl="logoUrl"/>
        <span style="color: #999999">建议尺寸300x750高宽，大小2M以内</span>
      </el-form-item>
      <el-form-item label="名片Logo" prop="cardLogo">
        <uploadimg :setImg="setCardLogo" :dialogImageUrl="cardLogoUrl"/>
        <span style="color: #999999">建议尺寸300x750高宽，大小2M以内</span>
      </el-form-item>
      <el-form-item>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" :loading="loading"  @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import uploadimg from '@/components/UploadImg/index.vue'
  import { edit,detail } from '@/api/manager'
  import { getToken } from '@/utils/auth'
  import {showDecimal} from '@/utils'
  export default {
    data() {
      return {
        loading:false,
        pwd:false,
        dialogImageUrl:'',
        logoUrl:'',
        shareImageUrl:'',
        cardLogoUrl:'',
        form: {
          shareImage:'',
          cardLogo:'',
          logo:'',
          mobile:'',
          password:'',
          name: '',
          contactName:'',
          contactMobile:'',
          freeDays:'',
          role:'team',
          price:'',
          token:getToken(),
          coverImage:''
        },
        rules:{
          mobile: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                  callback(new Error("请输入正确的手机号码"));
                } else {
                  callback();
                }
              }
            }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 8, max: 12, message: '请输入8到12位的密码 ', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
          freeDays: [
            { required: true, message: '请输入试用天数', trigger: 'blur' },
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' },
          ],
        }
      }
    },
    methods: {
      onSubmit() {
        this.form.price=(this.form.price-0)*100
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading=true
            let data=JSON.parse(JSON.stringify(this.form))
            if(this.$route.query.id&&!this.pwd){
              delete data.password
            }
            edit(data).then(res=>{
              this.$message.success('添加(编辑)成功')
              this.onCancel()
            }).finally(()=>{
              this.loading=false
            })
          }else{
           this.form.price=(this.form.price-0)/100
          }
        });
      },
      setShareImg(url){
        this.form.shareImage=url;
      },
      setImg(url) {
        this.form.coverImage = url
      },
      setLogo(url){
        this.form.logo=url
      },
      setCardLogo(url){
        this.form.cardLogo=url
      },
      onCancel() {
        this.$router.go(-1)
      }
    },
    created() {
      if(this.$route.query.managerId){
        detail({targetId:this.$route.query.managerId}).then(res=>{
          this.form=res.data
          this.dialogImageUrl=res.data.coverImage;
          this.logoUrl=res.data.logo;
          this.cardLogoUrl=res.data.cardLogo
          this.shareImageUrl=res.data.shareImage;
          this.form.price=showDecimal(res.data.price);
          this.form.role=res.data.role.value
          this.form.token=getToken()
          this.form.adminId=res.data.id;
        })
      }
    },
    components:{
      uploadimg
    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    width: 500px;
  }
  .line{
    text-align: center;
  }
</style>

